<!--
 * @Author: YTian
 * @Date: 2023-05-18 19:24:25
 * @LastEditTime: 2023-05-18 21:19:38
 * @Description: 卡片组件
 * @FilePath: \pcsong\src\components\Card.vue
-->
<script setup>
const props = defineProps({
	card__title: String,
	list: {
		type: Array,
		required: true
	}
})

const emits = defineEmits()

const on_click = (id) => {
	emits('card_click', id)
}
</script>

<template>
	<div class="card_main">
		<div class="card__title">{{ card__title }}</div>
		<div class="card__box">
			<div
				class="card__box__item"
				v-for="item in list"
				@click="on_click(item.id)"
			>
				<img :src="item.cover" alt="" />
				<p>{{ item.name }}</p>
			</div>
		</div>
	</div>
</template>

<style scoped>
.card_main {
	width: 100%;
	height: 100%;
}

.card__title {
	font-weight: 400;
	font-size: 36px;
	line-height: 44px;

	color: #000000;

	margin-bottom: 14px;
}

.card__box {
	display: grid;
	grid-gap: 14px;
	grid-template-columns: repeat(auto-fill, 120px);
}

.card__box__item {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;

	height: 150px;

	cursor: pointer;
}

.card__box__item span,
.card__box__item p {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card__box__item img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 14px;
}
</style>
